---
title: Vue
description: Vue.js-specific linting rules for Ultracite.
---

The Vue configuration has Vue.js-specific linting rules for component structure, data options, computed properties, and reserved keywords. It also includes overrides to prevent false positive linting errors in `.vue` files.

## Installation

Add the Vue configuration to your `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/vue"]
}
```

## Overview

This configuration adds rules specific to Vue.js development:

- **HTML Support**: Enables experimental full HTML support with script and style indentation
- **Component Naming**: Enforce multi-word component names
- **Data Structure**: Prevent improper data option declarations
- **Reserved Keywords**: Disallow use of Vue reserved props and keys
- **Duplicate Keys**: Prevent duplicate keys in component options
- **React-Specific Props**: Disallow React-specific props in Vue components
- **Vue File Overrides**: Relaxed rules for `.vue` files to handle Single File Component structure

## HTML Formatter Configuration

The Vue preset enables experimental HTML support with special formatting for embedded scripts and styles:

```jsonc
{
  "html": {
    "experimentalFullSupportEnabled": true,
    "formatter": {
      "indentScriptAndStyle": true
    }
  }
}
```

This configuration:
- **Experimental Full Support**: Enables Biome's experimental HTML parsing and formatting capabilities for `.vue` files
- **Indent Script and Style**: Properly indents code inside `<script>` and `<style>` tags in Vue Single File Components

## Vue-Specific Rules

### Nursery

| Rule | Setting | Description |
|------|---------|-------------|
| `noVueDataObjectDeclaration` | `error` | Prevent using object declaration for the `data` option in Vue components. The `data` option must be a function that returns an object. |
| `noVueDuplicateKeys` | `error` | Prevent duplicate keys in Vue component options. Keys in `data`, `computed`, `methods`, etc. must be unique. |
| `noVueReservedKeys` | `error` | Disallow Vue reserved keys like `$data`, `$props`, `$el`, etc. in component options. |
| `noVueReservedProps` | `error` | Disallow Vue reserved props like `key`, `ref`, and `is` as custom component props. |
| `noVueVIfWithVFor` | `error` | Disallow `v-for` and `v-if` on the same element. |
| `useVueHyphenatedAttributes` | `error` | Encourage using kebab-case for attribute names, per the Vue style guide's recommendations. |
| `useVueMultiWordComponentNames` | `error` | Enforce multi-word component names to avoid conflicts with HTML elements. Single-word names like `Button` or `Card` should be avoided. |
| `useVueValidVBind` | `error` | Enforce the validity of `v-bind` directives in Vue files. |
| `useVueValidVElseIf` | `error` | Enforce valid `v-else-if` directives in Vue templates. Reports invalid directives with missing conditional expressions or when not preceded by a `v-if` or `v-else-if` directive. |
| `useVueValidVElse` | `error` | Enforce valid `v-else` directives in Vue templates. Reports directives that are not preceded by a `v-if` or `v-else-if` directive. |
| `useVueValidVHtml` | `error` | Enforce valid usage of the `v-html` directive in Vue templates. Reports directives with missing expressions, unexpected arguments, or unexpected modifiers. |
| `useVueValidVIf` | `error` | Enforce valid `v-if` directives in Vue templates. Disallows arguments and modifiers, and ensures a value is provided. |
| `useVueValidVOn` | `error` | Enforce valid `v-on` directives in Vue templates. Reports invalid `v-on` / shorthand `@` directives with missing event names, invalid modifiers, or missing handler expressions. |
| `useVueValidVText` | `error` | Enforce valid `v-text` directives in Vue templates. The rule reports when v-text has an argument, has modifiers, or is missing a value. |

### Suspicious

| Rule | Setting | Description |
|------|---------|-------------|
| `noReactSpecificProps` | `error` | Disallow React-specific props like `className` and `htmlFor` in Vue. Use `class` and `for` instead. |

## Vue File Overrides

The following rules are disabled for `.vue` files to prevent false positives due to Biome's partial support for Vue Single File Components:

### Correctness

| Rule | Setting | Description |
|------|---------|-------------|
| `noUnusedVariables` | `off` | Allow unused variables in `.vue` files. Variables in the script section may only be used in the template. |
| `noUnusedImports` | `off` | Allow unused imports in `.vue` files. Imports may only be used in the template section. |

### Style

| Rule | Setting | Description |
|------|---------|-------------|
| `useConst` | `off` | Allow `let` and `var` declarations in `.vue` files for reactive data patterns. |
| `useImportType` | `off` | Disable explicit import type requirements for better compatibility with Vue's build system. |
